<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./css/mui.css" />
		<script src="js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" id='home' href="pages/main.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			
			<a class="mui-tab-item"><!-- 给中部凸起大图标占个位置，使得左右两边的tab按钮均匀分布，实际这个tab没用到 -->
				<span>占位</span>
			</a>
			
			<a class="mui-tab-item" id='setting' href="pages/setting.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
	</body>
	<script src="../js/mui.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var index = 0;
		var subpages = ['pages/main.html','pages/ReportMatter.html','pages/setting.html'];
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			//如下在中部添加一个凸起图标
			var leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中
			/**
			 * drawNativeIcon 绘制中部凸起大图标，具体参数含义参考plus.nativeObj.View(id, styles, tags)文档说明[http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View]
			 * 实现原理：
			 *   id为bg的tag 创建带边框的圆
			 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
			 * 	 id为iconBg的红色背景图
			 *   id为icon的字体图标
			 *   注意创建先后顺序，创建越晚的层级越高
			 */
			var drawNativeIcon = util.drawNative('icon', {
				bottom: '5px',
				left: leftPos + 'px',
				width: '60px',
				height: '60px'
			}, [{
					tag: 'rect', //创建带边框的圆。 "rect" - 绘制矩形区域，与drawRect操作一致，此时id、color、position、rectStyles属性值有效
					id: 'bg',
					position: {
						top: '1px',
						left: '0px',
						width: '100%',
						height: '100%'
					},
					rectStyles: {
						color: '#fff',
						radius: '50%',
						borderColor: '#ccc',
						borderWidth: '1px'
					}
				}, {
					tag: 'rect', //创建白色矩形遮住圆下半部分，只显示凸起带边框部分
					id: 'bg2',
					position: {
						bottom: '-0.5px',
						left: '0px',
						width: '100%',
						height: '45px'
					},
					rectStyles: {
						color: '#fff'
					}
				}, {
					tag: 'rect',
					id: 'iconBg',
					position: {
						top: '5px',
						left: '5px',
						width: '50px',
						height: '50px'
					},
					rectStyles: {
						color: '#2A83FF',
						radius: '50%'
					}
				}, {
					tag: 'font', //创建文字。 "font" - 绘制文本内容，与drawText操作一致，此时id、position、text、textStyles属性值有效；
					id: 'icon',
					text: '+',
					position: {
						top: '0px',
						left: '5px',
						width: '50px',
						height: '100%'
					},
					textStyles: {
						fontSrc: '_www/fonts/iconfont.ttf',
						align: 'center',
						color: '#fff',
						size: '30px'
					}
				},
			]);
 
			// 把创建的中央凸起图标append 到父webview中
			self.append(drawNativeIcon);
			//自定义监听凸起图标点击事件
			var active_color = '#fff'; //激活的颜色
			drawNativeIcon.addEventListener('click', function(e) {
				mui.openWindow('pages/ReportMatter.html','pages/ReportMatter.html',{});
				//显示凸起图标对应的页面，隐藏其它几个Tab对应的页面
				plus.webview.show('pages/ReportMatter.html');
				plus.webview.hide('pages/main.html');
				plus.webview.hide('pages/setting.html');
 
				//取消其它几个Tab对应的页面的选中效果
				$(".mui-tab-item").removeClass('mui-active');
 
				// 重绘字体颜色
				
			});
			var Sdata = plus.webview.currentWebview();
			// document.getElementById("home").addEventListener('click',function(){
			// 	mui.openWindow('pages/main.html','pages/main.html',{});
			// })
			// document.getElementById("setting").addEventListener('click',function(){
			// 	mui.openWindow('pages/setting.html','pages/setting.html',{});
			// })
			//把每个tab对应的页面加载到当前webview
			for (var i = 0; i < 3; i++) {
				
				var sub = plus.webview.create(
					subpages[i], //url
					subpages[i], //id
					{
						top: "0px", //子页面距离顶部的位置
						bottom: "50px" //子页面距离底部的位置
					},{
						userID:Sdata.userID,username:Sdata.username,account:Sdata.account
					}
				);
 
				if (i != index) {
					sub.hide()
				}
 
				self.append(sub);
			}
			
		}) 
		
		
		//如下设置除了中部大图标的两个Tab的点击切换事件
		var activetab = subpages[index];
		mui(".mui-bar-tab").on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			// if (activetab == targetTab) {
			// 	return;
			// }
 
			// plus.webview.show(targetTab);
			// plus.webview.hide(activetab);
			mui.openWindow({
				id:targetTab
			})
 
			activetab = targetTab;
			
		})
	</script>
 
</html>